<template>
<div class="comp-monitor-screen-box-header-box">
  <div class = "comp-monitor-screen-box-header" >
    <div class = "comp-monitor-screen-box-header-left">
      <div class = "comp-monitor-screen-box-header-left-time">
        <div class = "time-bg">{{ date.year }}</div><span>年</span>
        <div class = "time-bg">{{ date.month }}</div><span>月</span>
        <div class = "time-bg">{{ date.day }}</div><span>日</span>
        <div class = "time-bg">
          <span>{{ date.hour }}</span><span>:</span> <span>{{ date.minute }}</span> <span>:</span><span>{{ date.seconds }}</span>
        </div>
      </div>
    </div>
    <div class = "comp-monitor-screen-box-header-middle">
      <div class = "comp-monitor-screen-box-header-middle-home">系统首页</div>
      <div  class = "comp-monitor-screen-box-header-middle-device">
        设备监控
      </div>
    </div>
    <div class = "comp-monitor-screen-box-header-right">
      <div class = "comp-monitor-screen-box-header-right-select" @mouseover = "slideShow = true" @mouseleave = "slideShow = false">
        <span>设置</span>
        <div class = "comp-monitor-screen-box-header-right-select-item" :class = "{'slideAnimation': slideShow}" >
          <div @click = "goAdmin">后台管理</div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import {onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import currentTime from "@/utils/quickTime"
import {urlPrefix} from "@/utils/request";
const slideShow = ref(false)
const date = ref({
  year: "",
  month: "",
  day: "",
  hour: "",
  minute: "",
  seconds: ""
})
let currentTimer;
onMounted(()=>{
  countCurrentTime()
})
onUnmounted(()=>{
  clearInterval(currentTimer)
})
function countCurrentTime(){
  date.value = currentTime("today","monitorTime")
  currentTimer = setInterval(() =>{
    date.value = currentTime("today","monitorTime")
  },1000)
}

const env_str = import.meta.env.VITE_APP_ENV
function goAdmin(){
  //适配线上部署环境
  window.location.href = urlPrefix();
}

</script>

<style scoped>
.slideAnimation{
  height: 54px !important;
}
.comp-monitor-screen-box-header-box{
  z-index: 9999999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 84px;
  background: #001937;
}
.comp-monitor-screen-box-header{
  padding-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  height: 100%;
  width: 100%;
  min-width: 706px;
  background: url("src/assets/cloudV2/img/monitor-header-en.png") no-repeat 50% 0;
  /*background-size: 100% 100%;*/
}
.comp-monitor-screen-box-header-left ,.comp-monitor-screen-box-header-right{
  width: 605px;
  height: 37px;
  flex: 1 1 auto;
}
.comp-monitor-screen-box-header-left-time{
  margin-left: 12px;
}
.comp-monitor-screen-box-header-left-time{

}
.comp-monitor-screen-box-header-right-time ,.comp-monitor-screen-box-header-left-time{
  font-size: 14px;
  color: #daecff;
  margin-left: 32px;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.time-bg{
  margin: 0 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 80%;
  background: url("@/assets/cloudV2/img/time-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
}
.comp-monitor-screen-box-header-left{
  background: url("@/assets/cloudV2/img/header-left.png") no-repeat 2px 0;
  background-size: 100% 100%;
  margin-right: 8px;
  overflow: hidden;
}
.comp-monitor-screen-box-header-right{

  background: url("@/assets/cloudV2/img/header-right.png") no-repeat 2px 0;
  background-size: 100% 100%;
  margin-left: 8px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: end;
}
.comp-monitor-screen-box-header-middle{
  color: #daecff;
  width: 706px;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
}
.comp-monitor-screen-box-header-middle-home,.comp-monitor-screen-box-header-middle-device{
  width: 145px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comp-monitor-screen-box-header-middle-home{
  background: url("@/assets/cloudV2/img/header-middle-left.png") no-repeat 0 0;
  padding-right: 20px;
  cursor: pointer;
}
.comp-monitor-screen-box-header-middle-device{
  background: url("@/assets/cloudV2/img/header-middle-right.png") no-repeat 2px 0;
  padding-left: 32px;
  cursor: pointer;
}
.comp-monitor-screen-box-header-middle-device:hover{
  background: url("@/assets/cloudV2/img/header-middle-right-active.png") no-repeat 2px 0;
}
.comp-monitor-screen-box-header-right-select{
  font-size: 14px;
  color: #daecff;
  margin: 0 36px 0 16px;
  width: 72px;
  height: 27px;
  background: url("@/assets/cloudV2/img/select.png") no-repeat 0 2px;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.comp-monitor-screen-box-header-right-select-item{
  z-index: 50000;
  overflow: hidden;
  transition: all ease .5s;
  position: absolute;
  /*width: 72px;*/
  width: 175px;
  height: 0;
  background: url("@/assets/cloudV2/img/select-item.png") no-repeat 50% 0;
  background-size: 100% 100%;
  top: 100%;
  margin-top: -8px;
}
.comp-monitor-screen-box-header-right-select-item div:first-child{
  margin-top: 7px;
}
.comp-monitor-screen-box-header-right-select-item div:hover{
  color: #34ECCB
}
.comp-monitor-screen-box-header-right-select-item div{
  display: flex;
  justify-content: center;
  padding: 2px 0;
}
</style>
